// 定义懒加载插件

import { useIntersectionObserver } from '@vueuse/core'


export const lazyLoading = {
    install(app){
        app.directive('img-lazy',{
            /**
             * 在元素挂载到DOM时执行，使用IntersectionObserver API监听元素与视口交叉状态
             *
             * @param el 需要被监听的DOM元素
             * @param binding Vue指令绑定的值
             */
            mounted(el, binding) {
                const {stop} = useIntersectionObserver(el,([{isIntersecting}])=>{
                    // console.log(isIntersecting);
                    if(isIntersecting){
                        el.src = binding.value
                        stop()
                    }
                })
                
            },
        })
    }
}